Vue2迁移-$attrs 包括 class & style

发表于 | 分类于 |
字数统计: 363 字 | 阅读时长 ≈ 1 分钟

概览

现在 $attrs 包含传递给组件的所有 attribute，包括 class 和 style。

2.x 行为

在 Vue 2 的虚拟 DOM 实现中对 class 和 style attribute 有一些特殊处理。因此，它们不包括在 $attrs 中，而其它所有 attribute 都在。

在使用 inheritAttrs: false 时会产生副作用：

  • $attrs 中的 attribute 不再自动添加到根元素中，而是由开发者决定在哪添加。
  • 但是 class 和 style 不属于 $attrs，仍然会应用到组件的根元素：
1
2
3
4
5
6
7
8
9
10
<template>
  <label>
    <input type="text" v-bind="$attrs" />
  </label>
</template>
<script>
export default {
  inheritAttrs: false
}
</script>

像这样使用时：

1
<my-component id="my-id" class="my-class"></my-component>

……将生成以下 HTML：

1
2
3
<label class="my-class">
  <input type="text" id="my-id" />
</label>

3.x 行为

$attrs 包含所有的 attribute，这使得把它们全部应用到另一个元素上更加容易。那么上面的示例就会生成以下 HTML：

1
2
3
<label>
  <input type="text" id="my-id" class="my-class" />
</label>

迁移策略

在使用 inheritAttrs: false 的组件中，请确保样式仍然符合预期。如果你之前依赖 class 和 style 的特殊行为，那么可能会破坏一些视觉效果，因为这些 attribute 现在可能应用到了另一个元素。